<!--申请退款-->
<template>
  <div>
    <title-header :title="title"></title-header>
    <goodB :orderId="orderId">
    </goodB>
    <group>
      <div class="cell">
        退款原因
        <span class="right" @click="showMenu" >{{showWay}}</span>
        <x-icon type="ios-arrow-right" size="30" class="iconR"></x-icon>
      </div>
      <div class="cell">
        退款金额 :
        <span class="money">￥454</span>
      </div>
      <router-link to="/shoppingCart">
        <x-button type="warn" class="bottom">提交</x-button>
      </router-link>
    </group>
    <actionsheet 
    v-model="show2" 
    :menus="menus2" 
    @on-click-menu="switchWay" 
    show-cancel></actionsheet>
  </div>
</template>

<script>
import goodB from '@/components/goodB.vue'
import TitleHeader from '@/components/titleHeader.vue'
import { CellFormPreview, Group, Cell, XButton,Actionsheet } from 'vux'
export default {
  components: {
    goodB,
    CellFormPreview,
    Group,
    Cell,
    XButton,
    TitleHeader,
    Actionsheet
  },
  data () {
    return {
      title: '申请退款',
      orderId: 1,
      show2: false,
      menus2: {
        menu1: '拍多了',
        menu2: '不喜欢',
        men3: '快递一直未送到',
        menu4: '未按约定的时间发货',
        menu5: '快递无跟踪记录',
        menu6: '空包裹,少货',
      },
      showWay: '请选择',
    }
  },
  methods: {
    showMenu () {
      this.show2 = true
    },
    switchWay (val) {
      this.showWay = this.menus2[val]
    }
  }
}
</script>

<style scoped>
.bottom {
  position: fixed;
  bottom: 0;
}
.cell {
  height: 2.5rem;
  padding: 0 15px;
  line-height: 2.5rem;
  font-size: 1rem;
  position: relative;
}
.iconR {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 0.9rem;
}
.right {
  position: absolute;
  right: 15%;
  top: 50%;
  transform: translate(0, -50%);
}
.money {
  color: red;
  font-size: 1.1rem;
}
</style>